<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Basic usage | Select2 - The jQuery replacement for select boxes</title>
	<meta name="generator" content="GravCMS" />
	<meta name="description" content="Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results." />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" type="text/css" rel="stylesheet" />
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js" type="text/javascript" ></script>
	<select class="js-source-states">
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
		<optgroup label="Mountain Time Zone">
			<option value="AZ">Arizona</option>
			<option value="CO">Colorado</option>
			<option value="ID">Idaho</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NM">New Mexico</option>
			<option value="ND">North Dakota</option>
			<option value="UT">Utah</option>
			<option value="WY">Wyoming</option>
		</optgroup>
		<optgroup label="Central Time Zone">
			<option value="AL">Alabama</option>
			<option value="AR">Arkansas</option>
			<option value="IL">Illinois</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="OK">Oklahoma</option>
			<option value="SD">South Dakota</option>
			<option value="TX">Texas</option>
			<option value="TN">Tennessee</option>
			<option value="WI">Wisconsin</option>
		</optgroup>
		<optgroup label="Eastern Time Zone">
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="IN">Indiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="OH">Ohio</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WV">West Virginia</option>
		</optgroup>
	</select>
	<script type="text/javascript">
		$(document).ready(function() {
			// Initialize "states" example
			var $states = $(".js-source-states");
			var statesOptions = $states.html();
			$states.remove();
			$(".js-states").append(statesOptions);
		});
	</script>
</head>
<body class="searchbox-hidden " style="margin: 20px 20px 20px 20px;">
<section id="body">
	<div class="padding highlightable">
		<div id="body-inner">
			<h2>Single select boxes</h2>
			<p>Select2 was designed to be a replacement for the standard <code>&lt;select&gt;</code> box that is displayed by the browser.  By default it supports all options and operations that are available in a standard select box, but with added flexibility.</p>
			<p>Select2 can take a regular select box like this...</p>
			<select class="js-states form-control"></select>
			<p>and turn it into this...</p>
			<div class="s2-example">
				<select class="js-example-basic-single js-states form-control"></select>
			</div>
			<pre><code>&lt;select class="js-example-basic-single" name="state"&gt;
  &lt;option value="AL"&gt;Alabama&lt;/option&gt;
    ...
  &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
&lt;/select&gt;</code></pre>
			<script type="text/javascript" class="js-code-example-basic-single">
				$(document).ready(function() {
					$('.js-example-basic-single').select2();
				});
			</script>
			<p>Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call <code>.select2()</code> on any jQuery selector where you would like to initialize Select2.</p>
			<pre><code>// In your Javascript (external .js resource or &lt;script&gt; tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});</code></pre>
			<h2>Multi-select boxes (pillbox)</h2>
			<p>Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.</p>
			<div class="s2-example">
				<p>
					<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
				</p>
			</div>
			<p><strong>In your HTML:</strong></p>
			<pre><code>&lt;select class="js-example-basic-multiple" name="states[]" multiple="multiple"&gt;
  &lt;option value="AL"&gt;Alabama&lt;/option&gt;
    ...
  &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
&lt;/select&gt;</code></pre>
			<p><strong>In your Javascript (external <code>.js</code> resource or <code>&lt;script&gt;</code> tag):</strong></p>
			<pre><code>$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});</code></pre>
			<script type="text/javascript">
				$.fn.select2.amd.require([
					"select2/core",
					"select2/utils"
				], function (Select2, Utils, oldMatcher) {
					var $basicSingle = $(".js-example-basic-single");
					var $basicMultiple = $(".js-example-basic-multiple");
					$.fn.select2.defaults.set("width", "100%");
					$basicSingle.select2();
					$basicMultiple.select2();
					function formatState (state) {
						if (!state.id) {
							return state.text;
						}
						var $state = $(
							'<span>' +
							'<img src="vendor/images/flags/' +
							state.element.value.toLowerCase() +
							'.png" class="img-flag" /> ' +
							state.text +
							'</span>'
						);
						return $state;
					};
				});
			</script>
			</p>
		</div>
	</div>
</section>
</body>
</html>